<!DOCTYPE html>
<body>
<style id="target">
@font-face {
  font-family: slow;
  src: url(slow-ahem-loading.cgi?delay=8000);
  font-display: fallback;
}
.test {
  font-family: slow, Arial;
  font-size: 50px;
}
</style>
<p>CSS change should not make loading-fallback text blank.</p>
<div id="test">abcdefg</div>
<script>

if (window.testRunner)
    testRunner.waitUntilDone();

window.onload = function() {
    setTimeout(runTest, 0);
};

function runTest() {
    document.getElementById('test').classList.add('test');
    setTimeout(function() {
        var newStyle = document.createElement('style');
        newStyle.innerHTML = "@font-face { font-family: dummy; src: local('Courier New'); }";
        document.body.insertBefore(newStyle, document.getElementById('target'));
        setTimeout(function() {
            if (window.testRunner)
                testRunner.notifyDone();
        }, 0);
    }, 500);
};
</script>
</body>
